<template>
	<view>
		<view @click="open" class="flex-direction margin-lr-sm">
			<slot name="label" v-bind="{ modelValue }">
                <view class="flex align-center justify-between">
                    <view class="margin-right-xs text-gray" v-if="!modelValue.id">
                        请选择
                    </view>
                    <template v-else>
                        <view class="flex-wrap text-black">
                            {{ modelValue.name }}
                        </view>
                    </template>
                    <view>
                        <uni-icons v-if="modelValue" class="content-clear-icon margin-left-xs" type="clear" :size="24"
                        color="#c0c4cc" @click.native.stop="modelValue = null"></uni-icons>
                        <uni-icons type="right" size="20" color="#8799a3"></uni-icons>
                    </view>
                </view>
			</slot>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup">
				<view class="bg-white padding-top bottom-popup">
					<view class="bg-white padding-sm text-center solid-bottom text-lg text-black flex">
						<view class="response">
							{{placeholder}}
						</view>
						<view @click="close" class="fr round" style="background-color: #F2F2F2;width: max-content;padding-left: 10rpx;padding-right: 10rpx; padding-top: 5rpx;">
								<uni-icons type="closeempty" size="15" color="#666666"></uni-icons>
						</view>
					</view>
					<view class="content" :style="contentStyles">
						<view class="cu-bar search margin-top-sm bg-white">
							<view class="search-form round padding-lr" style="background-color: #F2F2F2;height: 40px;">
								<input style="height: 40px;" @confirm="searchConfirm" :adjust-position="false" type="text" placeholder="请输入组织机构名称" confirm-type="search"></input>
								<uni-icons class="margin-left-xs" type="search" size="19"></uni-icons>
							</view>
						</view>
						<view class="margin-top-sm">
							<scroll-view scroll-y="true" :style="listStyles">
                                <ly-tree
                                    ref="tree"
                                    :tree-data="treeData" 
                                    :ready="ready"
                                    node-key="id"
                                    showRadio
                                    :props="{ label: 'name' }"
                                    :filterNodeMethod="filterNodeMethod"
                                    @radio-change="handleRadioChange">
                                </ly-tree>
							</scroll-view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { listSimpleDept } from "@/api/system/dept";
	import { treeDataTranslate } from "@/utils/common";
	export default {
		name:"DictSelectActionSheet",
		emits: ['update:modelValue'],
		model: {
			prop: 'modelValue', // 对应 props msg
			event: 'update:modelValue'
		},
		props: {
			modelValue: {
				type: Object,
				default: () => {return {}}
			},
			showSelectItem: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请选择组织机构'
			},
			// 是否可清空
			clearable: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
                ready: false,
				treeData: [],
				screenHeight: 0,
			};
		},
		computed: {
			contentStyles() {
				return `height: calc(${this.screenHeight}px - 200px)`;
			},
			listStyles() {
				return `height: calc(${this.screenHeight}px - 260px)`;
			},
		},
		watch: {},
		mounted() {
			this.loadData()
			var that = this
			uni.getSystemInfo({
				success: function (res) {
					that.screenHeight = res.windowHeight - res.statusBarHeight
				}
			});
		},
		methods: {
            searchConfirm(e) {
				this.$refs.tree.filter(e.target.value)
			},
			loadData() {
                listSimpleDept().then(res=>{
                    this.treeData = treeDataTranslate(res.data)
                    this.ready = true;
                })
			},
            filterNodeMethod(e, node) {
				return node.name.includes(e)
			},
			handleRadioChange(obj) {
				this.$emit('update:modelValue', {
					id: obj.data.id,
					name: obj.data.name
				})
			},
			open(){
				this.$refs.popup.open('bottom')
				if(this.modelValue && this.modelValue.id) {
					this.$nextTick().then(() => {
						this.$refs.tree.setChecked(this.modelValue.id, true)
					})
				}
			},
			close(){
				this.$refs.popup.close()
			},
			onClear() {
				this.selectItems = []
				this.$emit('update:modelValue', null)
			}
		},
	}
</script>

<style lang="scss">
	.bottom-popup {
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
	.content {
		background-color: #F2F2F2;
	}
	.scroll-Y {
		height: 100px;
	}
</style>